<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index1</title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	ul li{
		list-style: none;
	}
	body,html{
		width: 100%;
		height: 100%;
	}
	.wrap{
		width: 100%;
		height: 100%;
		background: linear-gradient(to top,#1c5db5,#25fff5);
		position: relative;
	}
	.clear{clear: both;}
	.box{
		width: 90%;
		min-width: 900px;
		height: 800px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 15px;
		box-sizing:border-box;
		color: #fff;
		min-height: 200px;
	}
	.side{
		width: 18%;
		height: 100%;
		text-align: center;
		display: none;
		max-height:600px;
		overflow:auto;
	}
	.side h2{
		line-height: 50px;
		border: 2px solid #fff;
		user-select:none;
		font-weight: 600;
	}
	.move_ul{
		line-height: 30px;
		height: 90%;
		box-sizing:border-box;
		padding: 0 10px;
		border:2px solid #00ffd9;
		overflow: auto;
	}
	.move_ul li{
		margin-top: 10px;
		user-select:none;
		cursor: default;
		display: none;
		z-index:1;
		font-size: 20px
	}
	.content{
		width: 82%;
		height: 100%;
		position: absolute;
		top: 0;
		right: -2%;
		box-sizing:border-box;
		padding: 15px 0;
	}
	.content_top{
		width: 100%;
		height: 200px;
		box-sizing:border-box;
		position: relative;
		display: none;
		text-align:left; 
	}
	#file{
		display: none;
	}
	.about_file{
		display:block;
		width: 150px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		border: 4px solid #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 100;
	}
	.content_bottom{
		width: 85%;
		height: 540px;
		box-sizing:border-box;
		position: relative;
		display: none;
	}
	.content_bottom p{
		width: 100%;
		height: 30px;
		position: absolute;
		bottom: 0;
		text-align: center;
		line-height: 30px;
	}
	.tip{
		top: 0;
	}
	#btn{
		display: block;
		width: 50px;
		height: 50px;
		border-radius:50%;
		line-height: 50px;
		text-align: center;
		border: 2px solid #45b30c;
		background-image:url(img/btn_bg.png);
		background-size:cover;
		background-repeat: no-repeat;
		background-position: -58px 0px;
		position: absolute;
		bottom: -10px;
		right: 0px;
		cursor: pointer;
	}
	.content_bottom_ul{
		width: 100%;
		position: relative;
		/* top: 15px; */
		box-sizing:border-box;
		padding: 0 40px;
	    max-height: 84%;
   		overflow: auto;
	}
	.content_bottom_ul i{
		display: inline-block;
		width: 2em;
		height: 30px;
		float: left;
	}
	.content_bottom_ul li{
		float: left;
		border: 1px solid #f5f566;
		min-width: 75px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		user-select:none;
		margin-right: 5px;
		/*margin-bottom: 15px;*/
		cursor: pointer;
		position: relative;
		transition: 2s all;
		font-size: 20px;
	}
	#ret{
		position: absolute;
		top: 10px;
		right: 20%;
		color: #fe5959;
		display: none;
		z-index: 100;
		cursor:pointer;
	}
	#clear{
	    display: block;
	    width: 50px;
	    height: 50px;
	    border-radius:50%;
	    line-height: 50px;
	    text-align: center;
	    border: 2px solid #fe5959;
	    position: absolute;
	    bottom: -10px;
	    left: 0px;
	    cursor: pointer;
	    background-image:url(img/btn_bg.png);
		background-size:cover;
		background-repeat: no-repeat;
	}
	.about_file:hover{
		border: 4px solid #87fd9d;
	}
	.content_top_div{
		position: absolute;
		top: 50%;
		left: 35%;
		transform: translate(-50%,-50%);
		/*padding: 15px;*/
		font-size: 22px;
	}
	.content_top h2{
		width: 63%;
		float: left;
		margin-top: 10px;
		margin-left: 40px;
	}
	.content_top h2 span{
		font-size: 18px;
		float: right;
		margin-right: 20px;
	    line-height: 30px;
	}
	#nextTip,#overTip{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		font-size: 24px;
		border:2px solid #fff;
		padding: 4px 10px;
		width: 340px;
		background: #000;
		display: none;
		opacity: 0;
		transition: opacity .5s ;
		z-index: 10;
	}
	#nextBtn,#overBtn{
		color: #57ff00;
		cursor: pointer;
	}
</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<input type="file" id="file"><label for="file" class="about_file">上传文件</label>
			<span id="ret">重载系统</span>
			<div class="side">
				<h2>选项栏</h2>
				<ul class="move_ul">
				</ul>
			</div>
			<div class="content">

				<div class="content_top">
					<h2>问题/效果：<span id="questionNum">题数：0/0</span></h2>
					<div class="content_top_div">
						<p id="content_top_p"></p>
					</div>
				</div>
				<div class="content_bottom">
					<p id="nextTip">恭喜你完成了，请继续<span id="nextBtn">下一题</span></p>
					<p id="overTip">已答完所有题目，是否<span id="overBtn">重新开始</span></p>
					<ul id="content_li" class="content_bottom_ul"></ul>
					<div class="clear"></div>
					<p id="ps">鼠标拖动或点击左边选项栏添加到下方，点击上方填空栏则清除当前栏的内容</p>
					<span id="clear">清空</span>
					<span id="btn" onclick="check()">提交</span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="jquery/jquery.js"></script>
<script>
	var arr=new Array(),arr2,arr3=new Array(),arr4=new Array();
	//arr:整理arr9获取的数组;
	//arr2:文件数组与干扰数组组合；
	//arr3:填空数组(填空栏)；
	//arr4:干扰项；
	var arr9,arr8,arr6,arr7=new Array(),judge_num,judge_num2=false;
	//arr9:上传文件数字（分隔符为 \n);
	//arr7:题目数组；
//上传文件；
	$('#file').on('change',function(){
        var file=document.getElementById("file").files[0];
        var reader=new FileReader();
        reader.readAsText(file,'gb2312');
        reader.onload=function(e)  {
            var result=document.getElementById("result");
            
            var content=this.result;
            
            if (content.charAt(content.length-1)=="\n"||content.charAt(content.length-1)==" ") {
                content=content.substring(0,content.length-1);
            }
            arr6=content.replace(/[\r]/g,"*").split("。");

   			content=content.replace(/[\r]/g,"");
	    	arr9=content.split("。");
        }

        //文件内容获取与临时储存
        setTimeout(function(){
        	//缓存数组到浏览器;
        	var x1,content;
        	for (var i = 0; i < arr9.length; i++) {
        		arr9[i].ind=i;
        		x1=arr9[i].indexOf('~');
        		x2=arr9[i].lastIndexOf('~');
        		arr7[i]=arr9[i].slice(x1+1,x2);
        		content=arr9[i].slice(0,x1);

        		// console.log(arr7[i])
        		// console.log(content);
        		if (content.charAt(content.length-1)=="\n"||content.charAt(content.length-1)==" ") {
                	content=content.substring(0,content.length-1);
            	}
        		arr9[i]={content:content,show:arr7[i],state:false};
        	}
        	arr9_length=arr9.length;
            create_new();

        },200)


	    $('#ret').fadeIn('slow');
	    $('.about_file').fadeOut();
	    $('.content_bottom').fadeIn('slow');
	    $('.side').fadeIn('slow');
	    $('.content_top').fadeIn('slow');
    });

//创建新题目；
    function create_new(){
    	//清空li；
    	if (judge_num2==true) {
    		$('.move_ul').html("");
    		$('.content_bottom_ul').html("");
    	};
    	//获取数组9中要展示的数组;
    	for (var i = 0; i < arr9.length; i++) {
    		if (arr9[i].state==false) {
    			arr9[i].ind=i;
    			arr=arr9[i].content.split(" ");
    			arr.show=arr9[i].show;
    			judge_num=i;
    			break;
    		}
    	}
    	// questionNum.innerHTML='题数：'+(judge_num+1)+"/"+(arr9.length-1);
    	$('#questionNum').html('题数：'+(judge_num+1)+"/"+(arr9.length-1))
    	// console.log(judge_num,arr9.length)
        arr2=arr4.concat(arr);//混合干扰项；
		/*随机排列数组arr*/
			function randomSort() {
			return Math.random() > 0.5 ? -1 : 1;
			}
			arr2.sort(randomSort);

		// 添加选择栏li；
            for (var i = 0; i < arr2.length; i++) {
                arr2[i].ind=i;
                $('.move_ul').append("<li>"+arr2[i]+"</li>");
            }
            $('.move_ul li').attr({
            	draggable: 'true',
            	ondragstart: 'drag(event)'
            }).fadeIn('slow');
        //添加填空栏li；
        // alert(arr.length)
        for (var i = 0; i < arr.length; i++) {
			console.log(arr[i])
        	//在适合的位置+br    如果数字里面包含回车， 那么当==回车我就br, 不能与回车 append li
        	if (arr[i].indexOf('{')>=0 ||  arr[i].indexOf('}')>=0){
        		$('.content_bottom_ul').append("<li></li></br></br></br><i></i>");
        	}
			else if(arr[i].indexOf(';')>=0){
				if(arr[i].indexOf('=')==-1 && arr[i].indexOf('<=')==-1 && arr[i].indexOf('<')==-1 && arr[i].indexOf('>=')==-1 && arr[i].indexOf('>')==-1){
					$('.content_bottom_ul').append("<li></li></br></br></br><i></i>");
				}else{
					$('.content_bottom_ul').append("<li></li>");
					
				}
				
        	}else{
            	$('.content_bottom_ul').append("<li></li>");
        	}
        }
        $('.content_bottom_ul li').attr({
        	ondragover: 'alldrap(event)',
        	ondrop: 'drop(event)'
        });
    	$('#content_top_p').text(arr.show);
    }
//重载事件
    $('#ret').on('click',function(){
    	window.location.reload();
    })
//清空填空栏
    $('#clear').on('click',function(){
    	$('.content_bottom_ul li').text("").css('background','');
        })

//点击事件
	$('.move_ul').on('click','li',function(){
		var li_content=$(this).text();
		var content_li_len=$('.content_bottom_ul li').length;
			for (var i = 0; i < content_li_len; i++) {
				var this_content=$('.content_bottom_ul li:eq('+i+')').text();
				if (this_content==""||this_content==null) {
					$('.content_bottom_ul li:eq('+i+')').text(li_content);
					return false;
				};
			};
	})

	$('.content_bottom_ul').on('dblclick','li',function(){
		$(this).text("");
	})

//响应高度；
	var screen_h=$(window).height();
	$('.side').css('max-height', screen_h*0.95 +'px');
	$(window).resize(function() {
		screen_h=$(this).height();
		$('.side').css('max-height', screen_h*0.95 +'px');
	});
//判断事件
    function check(event){
		arr3=[];
		var ps=document.getElementById('ps');
		var content=document.getElementById('content_li');
		var content_li=content.querySelectorAll('li');

		function HTMLDecode(text) { 
			var temp = document.createElement("div"); 
			temp.innerHTML = text; 
			var output = temp.innerText || temp.textContent; 
			temp = null; 
			return output; 
		} 

		for (var i = 0; i < content_li.length; i++) {
			arr3.push(content_li[i].innerHTML);
			arr3[i]=HTMLDecode(arr3[i]);
		}

		for (var i = 0; i < arr3.length; i++) {
			if (arr3[i]==arr[i]) {
				content_li[i].style.background="#3afd5c";
				content_li[i].style.color="#fff";
				/*content_li[i].style.border="none";
				content_li[i].style.minWidth="0";
				content_li[i].style.marginRight='0';*/
			}else{
				content_li[i].style.background="#FF4040";
				content_li[i].style.color="#000";
			}
		}
		s_arr=arr.toString();
		s_arr3=arr3.toString();
		//s_arr3==s_arr?ps.innerHTML="顺序正确，排序成功！":ps.innerHTML="顺序不对？要不再试试？(绿色正确，红色是错误)";
		if (s_arr3==s_arr) {
			$('#content_li li').css({'border':'none','minWidth':0,'marginRight':0,'background':'none'});
			if (judge_num==arr9_length-2) {
	    		$('#overTip').css({'display':'block','opacity':'1'});
    		}else{
				$('#nextTip').css({'display':'block','opacity':'1'})
    		}
		}else{
			ps.innerHTML="顺序不对？要不再试试？";
		}
	}
$('#nextBtn').on('click',function(){
	$('#nextTip').css({'display':'none','opacity':'0'})
	judge_num2=true;
	arr9[judge_num].state=true;
	create_new();
})
$('#overBtn').on('click',function(){
	$('#overTip').css({'display':'none','opacity':'0'})
	for (var i = 0; i < arr9.length; i++) {
		arr9[i].state=false;
	}
	create_new();
})

//拖拽事件
	function alldrap(ev){
		ev.preventDefault();
	}
	function drag(ev){
		ev.dataTransfer.setData("text/plain",ev.target.innerHTML);
	}
	function drop(ev){
		ev.preventDefault();
		var data=ev.dataTransfer.getData("text/plain");
		ev.target.innerHTML=data;
	}
//localStorage存储获取函数
    function save(key,val){//保存
        sessionStorage.setItem(key,JSON.stringify(val));
    }
    function fetch(key){//读取
        return JSON.parse(sessionStorage.getItem(key)) || [] ;
    }
</script>
